import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface PieNestProps {
    chartId?: string;
    width?: string;
    height?: string;
    legend?: string[][];
    seriesData?: { value: number; name: string }[][];
}

@customElement('lit-pie-nest')
export class LitPieNest extends LitElement {
    @property({type: String}) chartId: string = 'pie-rose-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: Array}) legend: string[][] = [
        ['Search Engine', 'Direct', 'Marketing'],
        ['Email', 'Union Ads', 'Video Ads', 'Baidu', 'Google', 'Bing', 'Others']
    ];
    @property({type: Array}) seriesData: { value: number; name: string }[][] = [
        [
            { value: 1548, name: 'Search Engine' },
            { value: 775, name: 'Direct' },
            { value: 679, name: 'Marketing' }
        ],
        [
            { value: 1048, name: 'Baidu' },
            { value: 335, name: 'Direct' },
            { value: 310, name: 'Email' },
            { value: 251, name: 'Google' },
            { value: 234, name: 'Union Ads' },
            { value: 147, name: 'Bing' },
            { value: 135, name: 'Video Ads' },
            { value: 102, name: 'Others' }
        ]
    ];

    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            data: this.legend[0].concat(this.legend[1]),
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                label: {
                    position: 'inner',
                    fontSize: 14
                },
                labelLine: {
                    show: false
                },
                data: this.seriesData[0]
            },
            {
                name: 'Access From',
                type: 'pie',
                radius: ['45%', '60%'],
                labelLine: {
                    length: 30
                },
                label: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#F6F8FC',
                    borderColor: '#8C8D8E',
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                        a: {
                            color: '#6E7079',
                            lineHeight: 22,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#8C8D8E',
                            width: '100%',
                            borderWidth: 1,
                            height: 0
                        },
                        b: {
                            color: '#4C5058',
                            fontSize: 14,
                            fontWeight: 'bold',
                            lineHeight: 33
                        },
                        per: {
                            color: '#fff',
                            backgroundColor: '#4C5058',
                            padding: [3, 4],
                            borderRadius: 4
                        }
                    }
                },
                data: this.seriesData[1],
            }
        ]
    };

    static styles = style;

    updated() {
        this.option.legend.data = this.legend[0].concat(this.legend[1]);
        (this.option.series as any)[0].data = this.seriesData[0];
        (this.option.series as any)[1].data = this.seriesData[1];
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width:${this.width}; height:${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-pie-nest': LitPieNest;
    }
}